<template>
  <div class="wrap-bg">
    <div 
        class="head-box h-360" 
        :style="{background: `url(${getAssetsImages('fiscal-taxation-bg')}) no-repeat`, 'background-size': '100%'}"
    >
    </div>
    <div class="padlr320 padtb30">
        <div class="search-box flex ju-bt">
            <div class="search-filter flex-a ju-bt padtb20 padlr50">
                <div class="filter-city flex flex-a">
                    <el-dropdown trigger="click">
                        <span class="flex-a search-txt">
                            <span class="mar-r5">中国</span>
                            <el-icon><ArrowDown /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>长沙</el-dropdown-item>
                                <el-dropdown-item>Action 2</el-dropdown-item>
                                <el-dropdown-item>Action 3</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <el-divider direction="vertical" style="height: 25px;" />
                <div class="filter-service">
                    <span class="txt-select">财税服务</span>
                </div>
                <el-divider direction="vertical" style="height: 25px;" />
                <div class="filter-service flex flex-a">
                    <el-dropdown trigger="click">
                        <span class="flex-a search-txt">
                            <span class="mar-r5" :class="{'txt-select': false}">选择服务项</span>
                            <el-icon><ArrowDown /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>长沙</el-dropdown-item>
                                <el-dropdown-item>Action 2</el-dropdown-item>
                                <el-dropdown-item>Action 3</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                    <el-divider direction="vertical" style="height: 25px;" />
                <div class="filter-form flex-a">
                    <div class="form-label">
                        姓名
                    </div>
                    <div class="form-ipt">
                        <el-input v-model="filterForm.name" style="width: 150px" placeholder="请输入姓名" />
                    </div>
                </div>
                <el-divider direction="vertical" style="height: 25px;" />
                <div class="filter-form flex-a">
                    <div class="form-label">
                        手机
                    </div>
                    <div class="form-ipt">
                        <el-input 
                            v-model="filterForm.mobile" 
                            style="width: 150px;" 
                            placeholder="请输入联系方式" 
                        />
                    </div>
                </div>
            </div>
            <div class="search-btn">
                立即咨询
            </div>
        </div>
    </div>
    <div class="list-card-box mar-t40 pad-b50">
        <div
            v-for="(item, index) in list"
            :key="index"
        >
            <div 
                class="list-card-one padlr320"
                 v-if="!index || index > 1"
            >
                <div class="block-tit">{{ item.title }}</div>
                <div class="flex ju-bt mar-t30">
                    <div 
                        class="one-child"
                        v-for="(childItem, childIndex) in item.child"
                        :key="childIndex"
                    >
                        <div 
                            class="one-child-tit flex-a ju-bt pad-l30 pad-r20"
                            :style="{background: `url(${getAssetsImages('agency-card')}) no-repeat`, 'background-size': '100%'}"
                        >
                            <div>{{ childItem.title }}</div>

                            <el-image 
                                @click="onCardLi(childItem, index)"
                                style="width: 30px; height: 30px" 
                                :src="getAssetsImages('arrows-icon')" 
                            />
                        </div>
                        <div class="one-child-info pad-t26 pad-l30 pad-r20">
                            <div class="child-info-describe">
                                {{ childItem.describe }}
                            </div>
                            <div class="one-child-price flex-a ju-bt mar-t37">
                                <div class="card-price">
                                    <span class="price-unit">￥</span>
                                    <span class="price-num">{{ childItem.price }}</span>
                                    <span class="price-label">/件起</span>
                                </div>
                                <div class="child-info-btn">
                                    立即购买
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div 
                class="list-card-two padlr320 martb60 padtb60"
                 v-if="index === 1"
            >
                <div class="block-tit">
                    {{ item.title }}
                </div>
                <div class="flex ju-bt flex-wrap">
                    <div 
                        class="two-child mar-t30"
                        v-for="(childItem, childIndex) in item.child"
                        :key="childIndex"
                        @click="twoCurrent = childIndex"
                    >
                        <div 
                            class="two-child-top flex padlr17 padtb19"
                            :style="{
                                background: childIndex === twoCurrent ? `url(${getAssetsImages('card-bg2')}) no-repeat` : '' , 
                                'background-size': '100% 100%'
                            }"
                        >
                            <el-image 
                                style="width: 120px; height: 120px" 
                                :src="getAssetsImages('copyright-card2')" 
                            />
                            <div class="two-top-info pad-l23">
                                <div class=" flex-a ju-bt">
                                    <div class="info-title block-tit f-s16">
                                        {{ childItem.title }}
                                    </div>
                                    <el-image 
                                        @click="onCardLi(childItem, childIndex)"
                                        style="width: 30px; height: 30px" 
                                        :src="getAssetsImages('arrows-icon')" 
                                    />
                                </div>
                                <div class="child-info-describe f-s14 mar-t10">
                                    {{ childItem.describe }}
                                </div>
                                <div class="one-child-price flex-a ju-bt mar-t24">
                                    <div class="card-price">
                                        <span class="price-unit">￥</span>
                                        <span class="price-num">{{ childItem.price }}</span>
                                        <span class="price-label">/件起</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="two-btns flex ">
                            <div class="btn-item">咨询客服</div>
                            <div class="btn-item btn-buy">立即购买</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <service-process :service_id="service_id" parentType="tos"></service-process>
    <advantage :service_id="service_id" parentType="tos"></advantage>
  </div>
</template>

<script setup>
/**
 * 财税服务
*/
// 服务流程组件
import serviceProcess from "@/components/serviceProcess/index.vue";
// 平台优势组件
import advantage from "@/components/advantage/advantage.vue"
import { ref, reactive } from "vue"
import serviceApi from "@/api/modules/trademarkService.js"
const router = useRouter();
const route = useRoute()
const service_id = ref(route.query.id ?? '')
let filterForm = reactive({
    name: "",
    mobile: ""
})
const toPath = item => {
    if(!item) return
    router.push({
        path: 'productDetail',
        query: {
            id: item.id,
            title: item.title,
        }
    });
};
let list = ref([
    {
        title: "代理记账",
        child: [
            {
                title: "一般纳税人代账",
                describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                price: "2500.00"
            },
            {
                title: "一般纳税人代账",
                describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                price: "2500.00"
            },
            
        ]
    },
    {
        title: "税务代办",
        child: [
            {
                title: "一般纳税人代账",
                describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                price: "2500.00"
            },
            {
                title: "一般纳税人代账",
                describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                price: "2500.00"
            },
            {
                title: "一般纳税人代账",
                describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                price: "2500.00"
            },
            {
                title: "一般纳税人代账",
                describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                price: "2500.00"
            },
            
        ]
    },
    {
        title: "税务筹划",
        child: [
            {
                title: "一般纳税人代账",
                describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                price: "2500.00"
            },
            {
                title: "一般纳税人代账",
                describe: "财税专家全流程管家式服务，助力企业财税管理省心无忧",
                price: "2500.00"
            },
            
        ]
    },
])
const onCardLi = (item, index) => {
    if (index) {
        twoCurrent.value = item.id;
    }
    toPath('productDetail', item)
}
let twoCurrent = ref(0)
// 获取列表
const getList = () => { 
    return serviceApi.getList({
        type: service_id.value,
        is_all: 0
    }).then(res => { 
        // changeBox.changeList = res.data.child
        // changeBox.changeInfo = res.data.info
    })
}
getList();
const getAssetsImages = name => {
  return new URL(`/src/assets/serviceImgs/${name}.png`, import.meta.url).href;
};
</script>

<style lang="scss" scoped>
.list-card-box {
    .list-card-two {
        // height: 640px;
        background: #f4f6fa;
        .two-child {
            // height: 198px;
            width: 625px;
            background: #ffffff;
            // border: 2px solid #ffffff;
            border-radius: 4px;
            box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
            .two-child-top {
                .two-top-info {
                    width: calc(100% - 120px);
                }
            }
            .two-btns {
                .btn-item {
                    width: 50%;
                    height: 40px;
                    background: #80a8ec;
                    border-radius: 0px 0px 0px 4px;
                    font-size: 14px;
                    font-family: PingFang SC, PingFang SC-Medium;
                    font-weight: Medium;
                    text-align: center;
                    color: #ffffff;
                    line-height: 40px;
                }
                .btn-buy {
                    background: #0052d9;
                    border-radius: 0px 0px 4px 0px;
                    color: #ffffff;
                }
            }
            
        }
    }
    .child-info-describe {
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #575966;
        line-height: 22px;
        text-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
    }
    .list-card-one {
        .one-child {
            width: 620px;
            .one-child-tit {
                width: 100%;
                height: 80px;
                background: #f1f4f8;
                border: 1px solid #e5e8eb;
                border-radius: 4px 4px 0px 0px;
                box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
            }
            .one-child-info {
                height: 149px;
                background: #ffffff;
                border: 1px solid #e5e8eb;
                border-radius: 0px 0px 4px 4px;
                box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
                
                .one-child-price {
                    .child-info-btn {
                        width: 140px;
                        height: 44px;
                        border: 1px solid #0052d9;
                        border-radius: 4px;
                        box-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
                        font-size: 16px;
                        font-family: PingFang TC, PingFang TC-Regular;
                        font-weight: Regular;
                        text-align: center;
                        color: #0052d9;
                        line-height: 44px;
                        text-shadow: 0px 10px 20px -2px rgba(0,0,0,0.08); 
                    }
                }
            }
        }
    }
}
.card-price {
    .price-unit,
    .price-num {
        color: #ff4600;
    }  
    .price-num {
        font-size: 28px;
        font-family: PingFang SC, PingFang SC-Semibold;
        font-weight: Semibold;
        text-align: left;
    }
    .price-label {
        font-size: 14px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        color: #181818;
    }
}
.block-tit {
    font-size: 28px;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: Medium;
    text-align: center;
    color: #202020;
}

:deep(.el-input__wrapper) {
    box-shadow: none;
    // flex-grow: 0;
    // background: transparent ;
    // width: 100%;
}
:deep(.search-txt:focus) {
  outline: none;
}
.search-box {
    height: 64px;
    background: #ffffff;
    border: 1px solid #1752d9;
    border-radius: 4px;
    
    span {
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: Regular;
        text-align: left;
        font-size: 15px;
    }
    .search-filter {
        width: calc(100% - 160px);
        span {
            color: #222426;
        }
        .filter-form {
            .form-label {
                line-height: 20px;
            }
        }
        .filter-service {
            span {
                color: #a2a6ad;
            }
            
            .txt-select {
                color: #222426;
            }
        }
    }

    .search-btn {
        width: 160px;
        height: 64px;
        background: #0052d9;
        border-radius: 0px 4px 4px 0px;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: Medium;
        text-align: left;
        color: #ffffff;
        text-align: center;
        line-height: 64px;
    }
}
</style>